import React from 'react'
import ReactDom from 'react-dom'
import './index.css'

const songs = [
  { id: 1, name: '痴心绝对', className: 'red' },
  { id: 2, name: '像我这样的人', className: 'green' },
  { id: 3, name: '南山南', className: 'pink' },
]
const pStyle = {
  color: 'red',
  backgroundColor: 'pink'
}

const title = (
  <div>
    <ul>
      {
        songs.map(item => {
          return <li className={item.className} key={item.id}>{item.name}</li>
        })
      }
    </ul>

    {
      songs.map(item => {
        return <p style={pStyle} key={item.id}>{item.name}</p>
      })
    }
  </div>

)

ReactDom.render(title, document.querySelector('#root'))